<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>这个html会在3000端口下运行</h1>
  <button>发送ajax请求4000端口的路由</button>
  <script>
    // console.log("hello");
    // 定义一个函数叫myfn
    function myfn (arg) {
      let obj = JSON.parse(arg);
      console.log(obj);
    }

    let btn = document.querySelector("button");
    btn.onclick = function () {
      // jsonp解决跨域：跨域是浏览器行为，浏览器不会拦截所有的跨域请求
      // 加载css js  img iframe 。。。
      // jsonp利用script标签的不跨越特性。发送http请求获取数据
      // 通过js动态生成script标签
      let s = document.createElement("script");
      s.src = "http://localhost:4000/getdata?cb=myfn";
      document.body.appendChild(s);
    }
  </script>
</body>

</html>